<template>
  <div class="mod-sys__menu">
    <div class="mod-sys__menu__left">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
        <el-form-item>
          <el-button @click="state2.getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="state.hasPermission('clc:clcdataset:save')" type="primary" @click="addOrUpdateHandle()">
            {{ $t("add") }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="state.dataListLoading" :data="state.dataList" row-key="id" border style="width: 100%">
        <el-table-column prop="name" label="名称" header-align="center" min-width="150">
          <template v-slot="scope">
            <el-button type="success" text @click="getRightList(scope.row)">
              {{ scope.row.name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="170">
          <template v-slot="scope">
            <el-button type="primary" link
                       @click="addHandle(scope.row)">{{ $t("add") }}
            </el-button>
            <el-button type="primary" link
                       @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}
            </el-button>
            <el-button type="primary" link @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
    </div>
    <div class="mod-sys__menu__right" v-if="state2.dataForm.setid">
      <el-form :inline="true" :model="state2.dataForm" @keyup.enter="state2.getDataList()">
        <el-form-item>
          <el-button @click="getRightList(null)">{{ $t("query") }}</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="setCloumnValue" border style="width: 100%">
        <el-table-column v-for="column in viewColumnList" :label="column.title" v-slot:default="scope">
          <!--          <el-input v-for="va in scope.row" v-if="va.columnId == column.columnId" v-model="scope.row.value">{{va}}</el-input>-->
          <esay-input :row="scope.row" :column="column" @inputchange="inputchange"></esay-input>
        </el-table-column>
        <!--        <el-table-column prop="name" label="中文名称" header-align="center" align="center"></el-table-column>-->
        <!--        <el-table-column prop="chInitials" label="中文首拼" header-align="center" align="center"></el-table-column>-->
        <!--        <el-table-column prop="inId" label="内部标识符" header-align="center" align="center"></el-table-column>-->
        <!--        <el-table-column prop="dataType" label="数据分类" header-align="center" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            {{ state2.getDictLabel("data_type", scope.row.dataType) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="dataLevel" label="数据等级" header-align="center" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            {{ state2.getDictLabel("data_level", scope.row.dataLevel) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="dataShare" label="数据共享" header-align="center" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            {{ state2.getDictLabel("data_share", scope.row.dataShare) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="dataOpen" label="数据开放" header-align="center" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            {{ state2.getDictLabel("data_open", scope.row.dataOpen) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </div>
    <div style="text-align: center; flex: 1" v-else>
      <el-empty description="请先选择一个数据集"></el-empty>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import {reactive, ref, toRefs} from "vue";
import AddOrUpdate from "./clcdataset-add-or-update.vue";
import Template from "@/views/devtools/template.vue";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import EsayInput from "@/components/esay-input/index.vue";

const view = reactive({
  getDataListURL: "/clc/clcdataset/listtree",
  deleteURL: "/clc/clcdataset"
});

const view2 = reactive({
  getDataListURL: "",
  dataForm: {
    setid: ''
  }
});

const state = reactive({...useView(view), ...toRefs(view)});
const state2 = reactive({...useView(view2), ...toRefs(view2)});
const deleteHandle = (id: any) => {
  debugger
  const ids = []
  ids.push(id)
  baseService.delete(state.deleteURL, ids).then(res => {
    if (res.code == 0) {
      ElMessage({type: 'success', message: "操作成功"})
      state.getDataList()
    }
  })
}

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const addHandle = (row: any) => {
  addOrUpdateRef.value.init2(row);
};

const viewColumnList = ref([])
const getRightList = (row: any) => {
  if (row.children && row.children.length > 0)
    return;
  if (row == null && (state2.dataForm.setid == null || state2.dataForm.setid == ''))
    return
  state2.dataForm.setid = row.id
  const columnList = []
  setCloumnValue.value = []
  baseService.get("/clc/clcdatacolumn/listbyset", {setid: row.id}).then(res => {
    for (let i = 0; i < res.data?.length; i++) {
      columnList.push({
        title: res.data[i].name,
        setId: row.id,
        columnId: res.data[i].id,
        value: ''
      })
    }
    viewColumnList.value = columnList;
    setCloumnValue.value.push(columnList)
  })
}

const setCloumnValue = ref([])
const inputchange = (res: any) => {
  const columnId = res.columnId
  const value = res.value
  for (let i = 0; i < setCloumnValue.value[0].length; i++) {
    if (setCloumnValue.value[0][i].columnId == columnId) {
      setCloumnValue.value[0][i].value = value
    }
  }
}
const dataFormSubmitHandle = () => {
  const data = setCloumnValue.value
  debugger
}
</script>
<style lang="scss" scoped>
.mod-sys__menu {
  display: flex;

  .mod-sys__menu__left {
    width: 30%;
    padding: 2px;
    overflow: auto;

    .el-form-item {
      margin-right: 20px;
    }
  }

  .mod-sys__menu__right {
    width: 70%;
    padding: 2px;
    overflow: auto;

    .el-form-item {
      margin-right: 20px;
    }
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }
}
</style>
